<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="shortcut icon" href="favicon.ico">

    <meta charset="UTF-8">
    <title>登录页面</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" type="text/css"
          href="bootstrap3/css/bootstrap.css">
    <link rel="stylesheet" type="text/css"
          href="bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
    <style type="text/css">
        body {
            background-color: #2e2e2e;
            padding-top: 20px;
        }

        .navbar {
            background-color: black;
            border: none;
        }

        #logo_img {
            position: relative;
            top: -10px;
        }

        /*搜索框相关样式*/
        #search_div > input {
            height: 30px;
            border-radius: 30px;
            background-color: #383838;
            padding: 10px 20px;
            color: #a9a8a8;
            border: none;
            position: relative;
            top: 10px;
            outline: none; /*去掉点击后的边框*/
        }

        /*搜索按钮样式*/
        #search_div > button {
            background-color: rgba(0, 0, 0, 0);
            color: gray;
            border: none;
            position: relative;
            top: 12px;
            right: 40px;
            outline: none;
        }

        /*瀑布流相关样式*/
        .grid-item{
            width: 200px;/*每个元素的宽度*/
            margin: 0 10px 10px 0;/*给元素添加右下外边距*/
        }

    </style>
</head>
<body>
<header class="container">
    <!--顶部导航条-->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img id="logo_img" alt="Brand" src="images/logo.png">
                </a>
            </div>
            <!--无序列表-->
            <ul class="nav navbar-nav" id="myUl">
                <li>
                    <a href="HomeServlet">首页</a>
                </li>
                <li th:each="c:${list}">
                    <a href="HomeServlet" th:text="${c.name}"></a>
                </li>
                <!--搜索框的li-->
                <li>
                    <form action="#">
                        <div id="search_div">
                            <input type="text" placeholder="Search" name="Keyword">
                            <button type="submit" class="glyphicon glyphicon-search"></button>
                        </div>
                    </form>
                </li>

            </ul>
            <!--右侧导航条-->
            <ul class="nav navbar-nav navbar-right">
                <!--th:if 用来控制元素是否显示 ,满足后面条件的则显示-->
                <li th:if="${user}==null">
                    <a class="fa fa-user-circle-o" href="login">管理员入口</a>
                </li>
                <li th:if="${user}!=null">
                    <a class="fa fa-user-circle-o" href="showsend">发布作品</a>
                </li>
                <li th:if="${user}!=null">
                    <a class="fa fa-user-circle-o" href="login">轮播图</a>
                </li>
                <li th:if="${user}!=null">
                    <a class="fa fa-user-circle-o" href="logout">登出</a>
                </li>
            </ul>


        </div>

    </nav>
    <!--主体部分-->
    <section>
        <!--轮播图-->
        <div id="myCarousel" class="carousel slide">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item" th:each="b:${bList}">
                    <img th:src="${b.imgUrl}" alt="First slide">
                    <div class="carousel-caption"></div>
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <!--轮播图结束-->
        <!--通过栅格化系统将页面分为9-3 -->
        <div class="row">
            <div class="col-md-9">
                <!--瀑布流开始-->
                <div class="grid">
                    <div class="grid-item" th:each="p:${pList}">
                        <a th:href="'detail?id='+${p.id}">
                            <img th:src="${p.imgUrl}" class="img-responsive">
                        </a>
                    </div>

                </div>


                <!--瀑布流结束-->


            </div>
            <div class="col-md-3"></div>
        </div>

    </section>

</header>


</body>
<script type="text/javascript" src="bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="bootstrap3/js/respond.min.js"></script>
<!--引入瀑布流插件相关文件-->
<script src="js/imagesloaded.pkgd.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script>
    //取出轮播图的第一个项目让其class 值为 item active  eq(0) 取出选择器中的第一个
    $(".item").eq(0).attr("class", "item active");
    $('.carousel').carousel("cycle");
    //对瀑布流进行初始化操作
    $(".grid").masonry({
        itemSelector:".grid-item",//告诉框架瀑布流中每个元素的选择器是什么
        columnWidth:210  //告诉框架每个元素所占的显示宽度是多少
    });

</script>
</html>

















